<template>
  <view class="vehicle-verify-page">
    <!-- 车辆认证列表区域 -->
    <view class="verify-list-container">
      <z-paging
        ref="paging"
        v-model="verifyList"
        @query="queryList"
        :auto="true"
        :refresher-enabled="true"
        :loading-more-enabled="true"
        :empty-view-text="'暂无数据'"
        class="verify-list"
      >
        <template #top>
          <!-- 导航栏 -->
          <up-navbar title="我处理的车辆认证" :autoBack="true" :fixed="true" bgColor="transparent" :border="false" placeholder/>
          
          <!-- 筛选器区域 -->
          <view class="filter-section">
            <view class="filter-row">
              <view class="filter-item">
                <picker mode="selector" :value="filters.statusIndex" :range="statusOptions" range-key="text" @change="onStatusChange">
                  <view class="picker-text">
                    <text>{{ filters.statusIndex >= 0 ? statusOptions[filters.statusIndex].text : '审核状态' }}</text>
                    <up-icon name="arrow-down" size="14"></up-icon>
                  </view>
                </picker>
              </view>
              <view class="filter-item search-item">
                <up-search
                  v-model="filters.searchKeyword"
                  :clearabled="true"
                  :showAction="true"
                  placeholder="请输入车牌号/车主姓名/手机号"
                  @search="handleSearch"
                  @clear="handleClear"
                >
                  <template #action>
                    <up-button type="primary" size="small" @click="handleSearch">搜索</up-button>
                  </template>
                </up-search>
              </view>
            </view>

          </view>
        </template>
        <view class="verify-list-content">
          <verify-item
            v-for="item in verifyList"
            :key="item.id"
            :verify="item"
            @pass="handlePass"
            @refuse="handleRefuse"
            @view="handleView"
          />
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import VerifyItem from './components/VerifyItem.vue'

// 筛选条件
const filters = reactive({
  statusIndex: 0,
  searchKeyword: ''
})

// 下拉选项数据
const statusOptions = [
  { value: '', text: '全部状态' },
  { value: 'pending', text: '待审核' },
  { value: 'success', text: '已通过' },
  { value: 'danger', text: '已拒绝' }
]

// 列表数据
const verifyList = ref([])
const paging = ref(null)

// 获取车辆认证列表数据
const queryList = async (pageNo, pageSize) => {
  try {
    // 获取筛选条件的值
    const params = {
      status: filters.statusIndex === 0 ? undefined : statusOptions[filters.statusIndex].value,
      searchKeyword: filters.searchKeyword,
      pageNum: pageNo,
      pageSize
    }

    // TODO: 替换为实际的API调用
    const response = await new Promise(resolve => {
      setTimeout(() => {
        // 模拟数据筛选
        let mockData = [
          {
            id: '1',
            plateNumber: '浙A12345',
            status: 'pending',
            ownerName: '张三',
            phone: '13800138000',
            createTime: '2024-03-15 10:30:00'
          },
          {
            id: '2',
            plateNumber: '浙B54321',
            status: 'success',
            ownerName: '李四',
            phone: '13900139000',
            createTime: '2024-03-15 09:15:00',
            processTime: '2024-03-15 11:20:00',
            remark: '车辆信息核实无误'
          },
          {
            id: '3',
            plateNumber: '浙C67890',
            status: 'danger',
            ownerName: '王五',
            phone: '13700137000',
            createTime: '2024-03-15 08:00:00',
            processTime: '2024-03-15 09:30:00',
            remark: '证件信息不符'
          },
          {
            id: '4',
            plateNumber: '京A88888',
            status: 'pending',
            ownerName: '赵六',
            phone: '13600136000',
            createTime: '2024-03-15 07:45:00'
          },
          {
            id: '5',
            plateNumber: '沪B99999',
            status: 'success',
            ownerName: '钱七',
            phone: '13500135000',
            createTime: '2024-03-15 06:30:00',
            processTime: '2024-03-15 08:15:00',
            remark: '审核通过'
          }
        ]

        // 根据状态筛选
        if (params.status) {
          mockData = mockData.filter(item => item.status === params.status)
        }

        // 根据关键词筛选（车牌号、车主姓名、手机号）
        if (params.searchKeyword) {
          const keyword = params.searchKeyword.toLowerCase()
          mockData = mockData.filter(item => 
            item.plateNumber.toLowerCase().includes(keyword) ||
            item.ownerName.toLowerCase().includes(keyword) ||
            item.phone.includes(keyword)
          )
        }

        resolve({
          data: mockData,
          total: mockData.length
        })
      }, 1000)
    })
    
    paging.value.complete(response.data)
  } catch (error) {
    console.error('获取车辆认证列表失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    })
    paging.value.complete(false)
  }
}

// 处理筛选条件变化
const onStatusChange = (e) => {
  filters.statusIndex = parseInt(e.detail.value)
  paging.value.reload()
}

// 处理搜索
const handleSearch = () => {
  paging.value.reload()
}

// 处理清空搜索
const handleClear = () => {
  filters.searchKeyword = ''
  paging.value.reload()
}


// 处理通过认证
const handlePass = (verify) => {
  uni.showModal({
    title: '确认操作',
    content: `确定通过车牌号为 ${verify.plateNumber} 的车辆认证吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 调用通过认证的API
        uni.showToast({
          title: '操作成功',
          icon: 'success'
        })
        paging.value.reload()
      }
    }
  })
}

// 处理拒绝认证
const handleRefuse = (verify) => {
  uni.showModal({
    title: '确认操作',
    content: `确定拒绝车牌号为 ${verify.plateNumber} 的车辆认证吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 调用拒绝认证的API
        uni.showToast({
          title: '操作成功',
          icon: 'success'
        })
        paging.value.reload()
      }
    }
  })
}

// 处理查看详情
const handleView = (verify) => {
  uni.navigateTo({
    url: `/pages/vehicle-verify/detail/index?id=${verify.id}`
  })
}

// 页面加载时获取数据
onMounted(() => {
  paging.value.reload()
})
</script>

<style lang="scss" scoped>
.vehicle-verify-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.filter-section {
    background-color: #ffffff;
    padding: 12px;
    border-radius: 12rpx;
    margin: 12px;
    
    .filter-row {
      display: flex;
      gap: 12px;
      align-items: center;
      
      .filter-item {
        flex: 1;
        
        .picker-text {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 12px;
          background-color: #f5f5f5;
          border-radius: 4px;
          
          text {
            font-size: 14px;
            color: #333;
          }
        }
        
        &.search-item {
          flex: 2;
        }
      }
    }
  }

.verify-list-container {
  flex: 1;
  
  .verify-list {
    height: 100%;
  }
  
  .verify-list-content {
    padding: 12px;
  }
}
</style>